<template>
  <div>
    <MBX
      level="数据统计"
      level2="数据报表"
    ></MBX>
    <div
      ref="shujuref"
      style="width:100%;height:600px"
    ></div>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      ShuJu: null,
      optionsall: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    this.xr();
    let _this = this;
    window.addEventListener(
      "resize",
      function() {
        _this.ShuJu.resize();
      },
      false
    );
  },
  methods: {
    async xr() {
      this.ShuJu = echarts.init(this.$refs.shujuref);
      console.log(this.ShuJu);

      let res = await this.$API.shujulist();
      console.log("数据列表", res);
      let arr = { ...this.optionsall, ...res };
      var option = arr;

      this.ShuJu.setOption(option);
    }
  }
};
</script>

<style scoped >
</style>
